<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>菜单详情</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <h3 class="big-tit">菜谱详情</h3>
    <div class="container flex-box">
      <div class="left">
        <img
          src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
          alt=""
        />
      </div>
      <div class="right">
        <h3>菜谱名称</h3>
        <p>
          菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息菜谱描述信息
        </p>
        <h5>下面列表是菜谱中美味的菜品哦！</h5>
      </div>
    </div>
    <ul class="list-box">
      <li>
        <a href="detail.html">
          <img
            src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
            alt=""
          />
          <h3>菜单名称</h3>
        </a>
      </li>
      <li>
        <a href="detail.html">
          <img
            src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
            alt=""
          />
          <h3>菜单名称</h3>
        </a>
      </li>
      <li>
        <a href="detail.html">
          <img
            src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
            alt=""
          />
          <h3>菜单名称</h3>
        </a>
      </li>
      <li>
        <a href="detail.html">
          <img
            src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
            alt=""
          />
          <h3>菜单名称</h3>
        </a>
      </li>
      <li>
        <a href="detail.html">
          <img
            src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
            alt=""
          />
          <h3>菜单名称</h3>
        </a>
      </li>
      <li>
        <a href="detail.html">
          <img
            src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
            alt=""
          />
          <h3>菜单名称</h3>
        </a>
      </li>
      <li>
        <a href="detail.html">
          <img
            src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
            alt=""
          />
          <h3>菜单名称</h3>
        </a>
      </li>
      <li>
        <a href="detail.html">
          <img
            src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
            alt=""
          />
          <h3>菜单名称</h3>
        </a>
      </li>
    </ul>
  </body>
  <script src="../jquery.min.js"></script>
  <script src="../baseApi.js"></script>
  <script src="./js/info.js"></script>
  <!-- <script>
    let id = localStorage.getItem("menuId");
    $.ajax({
      method: "get",
      url: "http://124.223.14.236:3001/api/recipe/" + id,
      success(res) {
        console.log(res);
        const str = `
          <div class="container flex-box">
      <div class="left">
        <img src="http://124.223.14.236:3001/public/food/list-${res.data.id}.jpg" alt="" />
      </div>
      <div class="right">
        <h3>${res.data.name}</h3>
        <p>${res.data.description}</p>
        <h5>下面列表是菜谱中美味的菜品哦！</h5>
      </div>
    </div>
          `;
        $(".flex-box").html(str);
      },
    });

    $.ajax({
      method: "get",
      url: "http://124.223.14.236:3001/api/recipeInfo",
      data: {
        recipe_id: id,
      },
      success(res) {
        console.log(res);
        const str1 = res.data
          .map((item) => {
            return `
        <li>
        <a href="detail.html" data-id="${item.id}"</a>
          <img src="http://124.223.14.236:3001/public/food/info-${item.id}.jpg" alt="" />
          <h3>${item.title}</h3>
        </a>
      </li>
      `;
          })
          .join("");
        $(".list-box").html(str1);
      },
    });
    $(".list-box").on("click", "a", function (e) {
      let id = $(this).attr("data-id");
      localStorage.setItem("cpid", id);
    });
  </script> -->
</html>
